<template>
  <div class="map_position">
    <div id="mapContainer" style="width: 100%; height: 500px"></div>
    <div class="map_position-panel"></div>
  </div>
</template>

<script setup name="MapPosition">
import { ref, onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "8081606dcae9578763f8339b843f6d67",
  };
  AMapLoader.load({
    key: "755572ca458d415727a999078c4a5c30",
    version: "2.0",
  })
    .then((AMap) => {
      const map = new AMap.Map("mapContainer", {
        center: [104.063403, 30.568744],
      });
      const marker = new AMap.Marker({
        position: [104.063403, 30.568744], //位置
      });
      map.add(marker); //添加到地图
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
});
</script>

<style lang="scss">
.map_position {
  &-panel {
    width: 100%;
    height: 80px;
    background-color: pink;
  }
}
</style>
